<template>
  <div>
    <ep-advance-card class="m-b-20" title="增删改表格" theme="theme-1">
      <ep-table :data="epData" can-edit :header-cell-style="{ background: '#fff', fontWeight: 'normal' }">
        <ep-table-item column="id" title="ID"></ep-table-item>
        <ep-table-item column="name" title="姓名"></ep-table-item>
        <ep-table-item column="addr" title="地址"></ep-table-item>
        <ep-table-item column="action" title="操作">
          <template slot-scope="props">
            <ep-button class="m-r-10" size="mini" type="success">编辑</ep-button>
            <ep-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="ion-information-circled"
              icon-color="red"
              placement="top"
              title="这是一段内容确定删除吗？"
              @confirm="handleClose(props.index)"
            >
              <ep-button size="mini" type="danger" slot="reference">删除</ep-button>
            </ep-popconfirm>
          </template>
        </ep-table-item>
      </ep-table>
      <ep-pager
        class="m-t-10 m-b-10"
        right
        :now-page="epPager.offset"
        :page-size="epPager.limit"
        :total-num="epDataTotal"
        @change="handlePageChange"
        @size-change="sizeChange"
      ></ep-pager>
    </ep-advance-card>
  </div>
</template>

<script>
import searchMixin from '@/common/mixins/searchMixin'
import { getTableData } from '../api'

export default {
  mixins: [searchMixin],
  data() {
    return {
      api: getTableData
    }
  },
  methods: {
    handleClose(index) {
      this.epData.splice(index, 1)
      this.$success('删除成功')
    }
  }
}
</script>

<style></style>
